<template>
<highlightjs language="JavaScript" highlightAuto top :code="code" />
</template>
<script>
export default {
  setup () {
    const code = `
    import 'ol/ol.css'
    import { Map, View } from 'ol'
    import SourceVector from 'ol/source/Vector'
    import LayerVector from 'ol/layer/Vector'
    import GeoJSON from 'ol/format/GeoJSON'

    const map = ref(null)
    const source = new SourceVector({
      features: new GeoJSON().readFeatures(QH, {
        dataProjection: 'EPSG:4326',
        featureProjection: 'EPSG:4326'
      })
    })
    const view = new View({
      projection: 'EPSG:4326',
      center: [98.860775, 35.521945], // 青海
      zoom: 6
    })

    const init = () => {
      map.value = new Map({
        target: map.value,
        layers: [
          new LayerVector({
            source: source
          })
        ],
        view: view
      })
    }
    `
    return {
      code
    }
  }
}
</script>
